<template>
  <el-card class="operation-data">
    <div style="display: flex;justify-content: space-between">
      <el-row>数据统计</el-row>
      <el-row
        ><span style="color: #4295ff;font-size: 12px"
          >数据每日00:00更新</span
        ></el-row
      >
    </div>
    <el-row class="averageData">
      <!--选择-->
      <div class="shop_activity">
        <div class="shop_activity_right">
          <div
            class="right"
            :class="[
              this.currentAverageDataType === '企业'
                ? 'shop_activity_right_active'
                : ''
            ]"
            @click="changeAverageDateType('企业')"
          >
            企业数据
          </div>
        </div>
      </div>
    </el-row>

    <div
      style="display: flex;justify-content: space-between;align-items: center"
    >
      <div id="operation-data-chart" style="width: 80%;height:400px;"></div>
      <div
        style="width:20%;display: flex;justify-content: center;align-items: center;flex-direction: column"
      >
        <div class="box_text">
          <span style="color: #999999;">今日</span>
          <span style="margin-top: 8px;color: #FD9800;font-size: 20px">{{
            dayData || 0
          }}</span>
        </div>
        <div class="box_text1">
          <span style="color: #999999;">昨日同比</span>
          <span style="margin-top: 8px;color: #82D2FF;font-size: 20px">{{
            "+" + upDayData || 0
          }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "indexDataLine",
  props: {
    useDataDayRangeInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      currentAverageDataType: "企业",
      dateArr: [],
      operationData: {
        emsNum: []
      },
      dayData: 0,
      upDayData: 0
    };
  },
  mounted() {
    if (this.dateArr !== []) {
      this.dateArr = [];
    }
    if (this.operationData.emsNum !== []) {
      this.operationData.emsNum = [];
    }
    for (
      let i = 0;
      i < this.useDataDayRangeInfo.useDataDayRangeEms.length;
      i++
    ) {
      this.dateArr.push(
        this.useDataDayRangeInfo.useDataDayRangeEms[i].createTime.slice(5, 10)
      );
      this.operationData.emsNum.push(
        this.useDataDayRangeInfo.useDataDayRangeEms[i].emsTotal
      );
    }
    this.echartsInit(this.dateArr, this.operationData.emsNum);
  },
  methods: {
    changeAverageDateType(AverageDateType) {
      this.echartsInit(this.dateArr, this.operationData.emsNum);
      this.dayData = this.operationData.emsNum[
        this.operationData.emsNum.length - 1
      ];
      this.upDayData =
        this.operationData.emsNum[this.operationData.emsNum.length - 1] -
          this.operationData.emsNum[this.operationData.emsNum.length - 2] || 0;
    },
    echartsInit(xAxisData, seriesData) {
      echarts.init(document.getElementById("operation-data-chart")).setOption({
        xAxis: {
          data: xAxisData,
          // 坐标轴颜色
          axisLine: {
            lineStyle: {
              color: "#dcdcdc"
            }
          }
        },
        yAxis: {
          // 坐标轴颜色
          axisLine: {
            lineStyle: {
              color: "#dcdcdc"
            }
          }
        },
        textStyle: {
          color: "#474646"
        },
        series: {
          type: "line",
          data: seriesData,
          smooth: true,
          symbol: "circle", // 点的类型
          symbolSize: 8, // 点的大小
          itemStyle: {
            normal: {
              color: "#4295ff", // 改变折线点的颜色
              lineStyle: {
                color: "#4295ff" // 改变折线颜色
              },
              label: { show: true } // 是否在折线点上显示数字
            }
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#4295ff"
              },
              {
                offset: 1,
                color: "rgb(255, 255, 255)"
              }
            ])
          }
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "line"
          },
          backgroundColor: "rgba(255, 255, 255, 0.5)",
          borderWidth: 1,
          borderColor: "#ccc",
          padding: 10,
          textStyle: {
            color: "#4295ff"
          }
        }
      });
    }
  },
  watch: {
    useDataDayRangeInfo: {
      handler() {
        if (this.dateArr !== []) {
          this.dateArr = [];
        }
        if (this.operationData.emsNum !== []) {
          this.operationData.emsNum = [];
        }
        for (
          let i = 0;
          i < this.useDataDayRangeInfo.useDataDayRangeEms.length;
          i++
        ) {
          this.dateArr.push(
            this.useDataDayRangeInfo.useDataDayRangeEms[i].createTime.slice(
              5,
              10
            )
          );
          this.operationData.emsNum.push(
            this.useDataDayRangeInfo.useDataDayRangeEms[i].emsTotal
          );
        }
        this.echartsInit(this.dateArr, this.operationData.emsNum);
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.box_text {
  height: 80px;
  width: 100px;
  border: 1px dashed #fd9800;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box_text1 {
  margin-top: 50px;
  height: 80px;
  width: 100px;
  border: 1px dashed #82d2ff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.operation-data {
  background-color: #fff;
  margin: 10px 0;
}
.averageData {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}

/*   选择*/
.shop_activity {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shop_activity_right_active {
  background-color: #1074fd !important;
  color: #ffffff;
}

.shop_activity_right {
  display: flex;
  width: 180px;
  height: 40px;
  border-radius: 6px;
  align-items: center;
  overflow: hidden;
}

.shop_activity_right .left,
.shop_activity_right .right {
  flex: 1;
  background-color: #f5f5f5;
  font-size: 18px;
  text-align: center;
  line-height: 38px;
}
</style>
